<template>
  <el-tooltip content="图形设置" placement="top-end">
    <el-button link icon="Operation" @click="open"></el-button>
  </el-tooltip>
  <!-- <el-dialog
    v-model="showDialog"
    :destroy-on-close="true"
    width="480px"
    append-to-body
    title="图形设置"
    draggable
  > -->
  <el-drawer v-model="showDialog" append-to-body title="图形设置" :size="320">
    <div>
      <el-form label-width="80px">
        <el-form-item label="模块标签">
          <el-radio-group v-model="indicatorSettings.showTags">
            <el-radio :value="true">显示&nbsp;(默认)</el-radio>
            <el-radio :value="false">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="标签尺寸">
          <el-radio-group v-model="indicatorSettings.fontSize">
            <el-radio :value="12">小&nbsp;(默认)</el-radio>
            <el-radio :value="14">中</el-radio>
            <el-radio :value="16">大</el-radio>
            <el-radio :value="18">特大</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="模块位置">
          <el-radio-group v-model="indicatorSettings.graphicIndex">
            <el-radio :value="0">层叠显示&nbsp;(默认)</el-radio>
            <el-radio :value="1">平铺显示</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="模块边框">
          <el-radio-group v-model="indicatorSettings.showBorder">
            <el-radio :value="true">显示&nbsp;(默认)</el-radio>
            <el-radio :value="false">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="不透明度">
          <el-radio-group v-model="indicatorSettings.unhoveredOpcity">
            <el-radio :value="0.8">80%</el-radio>
            <el-radio :value="0.7">70%&nbsp;(默认)</el-radio>
            <el-radio :value="0.6">60%</el-radio>
            <el-radio :value="0.5">50%</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!-- <div style="text-align: center; padding: 24px 0">
        <el-button type="primary" @click="handleSave">确定</el-button>
      </div> -->
    </div>
  </el-drawer>
  <!-- </el-dialog> -->
</template>

<script setup>
import { ref, computed } from "vue";
import useSeatStore from "@/store/seat.js";
const seatStore = useSeatStore();

const indicatorSettings = ref(seatStore.indicatorSettings);
// {
//   showTags: true,
//   graphicIndex: 0,
//   fontSize: 10,
//   showBorder: true,
//   showBoundary: true,
//   unhoveredOpcity: 0.75,
// }

const showDialog = ref(false);
const open = () => {
  indicatorSettings.value = seatStore.indicatorSettings;
  // indicatorSettings.value = JSON.parse(
  //   JSON.stringify(seatStore.indicatorSettings)
  // );
  showDialog.value = true;
};
const close = () => {
  // showDialog.value = false;
};

const handleSave = () => {
  // seatStore.indicatorSettings = indicatorSettings.value;
  // close();
};

defineExpose({ open });
</script>
